@using BootBlazor.Servers.Auth
@using BootBlazor.Servers.Helper
@using BootBlazor.Servers.Data
@using BootBlazor.Servers.Services
<div class="d-flex flex-column">
    <MudTextField Value="SelectedMenuName" Placeholder="@Loc["MenuPage_UpMenuSelectTitle"]" Variant="Variant.Outlined"
                  Margin="Margin.Dense" @onfocus="ElementFocused" @onblur="MouseBlur" Label="@Loc["MenuPage_UpMenuSelectTitle"]"
                  Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Clear"
                  OnAdornmentClick="CleanSelected" IconSize="Size.Small" />
    <MudPopover Open="@_popoverOpen" Fixed="true" Class="pa-4" tabindex="-1"
                RelativeWidth=DropdownWidth.Relative @onmouseenter="MouseEnterPopover" @onmouseleave="MouseLeavePopover" @onblur="MouseBlur">
        <div class="d-flex align-center">

            <MudText Typo="Typo.subtitle1">@Loc["MenuPage_UpMenuTitleText"]</MudText>
            <MudSpacer />
        </div>
        <MudDivider />
        <div style="max-height:400px;overflow:auto;">
            <MudTreeView T="MenuItem" Items="@MenuItems" Hover="true" SelectedValue="SelectedItem"
                         SelectedValueChanged="SelectedTreeItemChanged">
                <ItemTemplate>
                    <MudTreeViewItem @bind-Expanded="@context.Expanded" Items="@context.Children" Value="context.Value">
                        <Content>
                            <MudTreeViewItemToggleButton @bind-Expanded="@context.Expanded" Visible="context.Value!.MenuType == 1" />
                            <MudText Typo="Typo.subtitle2" Style="user-select:none;">@context.Value.MenuName</MudText>
                            <MudSpacer />
                        </Content>
                    </MudTreeViewItem>
                </ItemTemplate>
            </MudTreeView>
        </div>
    </MudPopover>
</div>
